<template>
    <div class="wrapper">
        <div class="dataName">明发活动数据总览</div>
        <mt-navbar v-model="selected">
            <mt-tab-item id="1" >总体数据</mt-tab-item>
            <mt-tab-item id="2" >中奖明细数据</mt-tab-item>
            <mt-tab-item id="3" >个人传播排行</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected" >
            <mt-tab-container-item id="1">
                <div class="actUserselect">
                    <span class="export"  @click="exportData1()">导出</span>
                </div>
                <div class="tabTitle">
                    <ul >
                        <li v-for="(items , id) in tabTitle" :key="items.id">{{items.content}}</li>
                    </ul>
                </div>
                <div class="actCountData">
                    <ul v-for="(item,index) in actCountData" :key="item.index">
                        <li>
                            <span>{{item.channel}}</span>
                            <span>{{item.user_count}}</span>
                            <span>{{item.share_count}}</span>
                            <span>{{item.tellfare_count}}</span>
                            <span>{{item.hb_count}}</span>
                            <span>{{item.gift_count}}</span>
                            <span>{{item.va_count}}</span>
                            <span>{{item.houseticket_count}}</span>
                        </li>
                    </ul>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="actUserselect">
                    <select name="" id="" @change="SelectChannel1" v-model="selectChannel">
                        <option :value="n.channel"  v-for="(n, id) in selectList" :key="n.id">{{n.adress}}</option>
                    </select>
                    <span class="export"  @click="exportData2()">导出</span>
                </div>
                <div class="actUserList tabTitle">
                    <ul >
                        <li v-for="(items , id) in userList" :key="items.id">{{items.content}}</li>
                    </ul>
                </div>
                <div class="actUserLists">
                    <ul>
                        <li v-for="item in actUserList">
                            <span>{{item.name}}</span>
                            <span>{{item.mobile}}</span>
                            <span>{{item.remark}}</span>
                            <span>{{item.isreceievd!=null?(item.isreceievd==1?'是':'否'):''}}</span>
                            <span>{{item.verificationtime | modifyTime}}</span>
                            <span>{{item.province}}/{{item.city}}</span>
                            <span>{{item.rename}}</span>
                        </li>
                    </ul>
                </div>
                <div class="seach" @click="serchMore(2)">查看更多</div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <div class="actUserselect">
                    <select name=""  @change="SelectChannel2" v-model="selectChannel">
                        <option :value="n.channel"  v-for="(n, id) in selectList" :key="n.id">{{n.adress}}</option>
                    </select>
                    <span class="export"  @click="exportData3()">导出</span>
                </div>
                <div class="tabTitle spreadList">
                    <ul >
                        <li v-for="(items , id) in spreadList" :key="items.id">{{items.content}}</li>
                    </ul>
                </div>
                <div class="actUserLists">
                    <ul>
                        <li v-for="item in actSpreadList">
                            <span>{{item.name?item.name:item.nickname}}</span>
                            <span>{{item.share_count}}</span>
                            <span>{{item.szcount}}</span>
                            <span>{{item.province}}/{{item.city}}</span>
                        </li>
                    </ul>
                </div>
                <div class="seach" @click="serchMore(3)">查看更多</div>
            </mt-tab-container-item>
        </mt-tab-container>

    </div>
</template>
<script>
    import { Navbar, TabItem } from 'mint-ui';
    import Vue from "vue";
    import request from "@/utils/request";
    Vue.component(Navbar.name, Navbar);
    Vue.component(TabItem.name, TabItem);
   export default {
       data(){
           return{
               actcode:'mf20190119',
               selected: '1',
               isDownLoad: 0,
               offset: 0,
               lists:[
                   {
                       id:1,
                       content: '渠道'
                   },{
                       id:2,
                       content: '受众数量'
                   },{
                       id:3,
                       content: '总转发次数'
                   },{
                       id:4,
                       content: '话费中奖人数'
                   },{
                       id:5,
                       content: '转发激励中奖人数'
                   },{
                       id:6,
                       content: '礼品券中奖人数'
                   },{
                       id:7,
                       content: '礼品券核销人数'
                   },{
                       id:8,
                       content: '购房券中奖人数'
                   }
               ],
               tabTitle:[
                   {
                       id:1,
                       content: '渠道'
                   },{
                       id:2,
                       content: '受众数量'
                   },{
                       id:3,
                       content: '总转发次数'
                   },{
                       id:4,
                       content: '话费中奖人数'
                   },{
                       id:5,
                       content: '转发激励中奖人数'
                   },{
                       id:6,
                       content: '礼品券中奖人数'
                   },{
                       id:7,
                       content: '礼品券核销人数'
                   },{
                       id:8,
                       content: '购房券中奖人数'
                   }
               ],
               userList:[
                   {
                       id:1,
                       content: '昵称'
                   },{
                       id:2,
                       content: '留电'
                   },{
                       id:3,
                       content: '购房优惠券领取兑换的项目'
                   },{
                       id:4,
                       content: '礼品券是否核销'
                   },{
                       id:5,
                       content: '礼品券核销时间'
                   },{
                       id:6,
                       content: '浏览省份/城市'
                   },{
                       id:7,
                       content: '传播渠道'
                   }
               ],
               spreadList:[
                   {
                       id:1,
                       content: '昵称'
                   },{
                       id:2,
                       content: '转发次数'
                   },{
                       id:3,
                       content: '带来的受众数量'
                   },{
                       id:4,
                       content: '浏览省份/城市'
                   }
               ],
               selectList: [
                   {
                       id: 0,
                       channel: '',
                       adress: "全部"
                   },
                   {
                       id: 1,
                       channel: 50,
                       adress: "马鞍山和县·明发湖光山色"
                   },
                   {
                       id: 2,
                       channel: 100,
                       adress: "南京浦口·明发新城中心"
                   },
                   {
                       id: 3,
                       channel: 150,
                       adress: "南京浦口·明发财富中心"
                   }, {
                       id: 4,
                       channel: 200,
                       adress: "南京浦口.明发香山郡"
                   }, {
                       id: 5,
                       channel: 250,
                       adress: "安徽池州.明发桃源名著"
                   }, {
                       id: 6,
                       channel: 300,
                       adress: "南京浦口.明发阅山悦府"
                   }, {
                       id: 7,
                       channel: 400,
                       adress: "滁州全椒.明发桃源香颂"
                   }, {
                       id: 8,
                       channel: 500,
                       adress: "滁州来安.明发北站中心"
                   }, {
                       id: 9,
                       channel: 550,
                       adress: "滁州来安.明发北站新城"
                   }, {
                       id: 10,
                       channel: 600,
                       adress: "南京浦口.明发国际中心"
                   }, {
                       id: 11,
                       channel: 650,
                       adress: "淮安金湖.明发金色水岸"
                   }, {
                       id: 12,
                       channel: 700,
                       adress: "南京浦口.明发珍珠泉九号"
                   }, {
                       id: 13,
                       channel: 750,
                       adress: "南京浦口.明发新城天街"
                   }, {
                       id: 14,
                       channel: 800,
                       adress: "南京浦口.明发香山郡商铺"
                   }, {
                       id: 15,
                       channel: 850,
                       adress: "镇江丹阳.明发锦绣街"
                   }, {
                       id: 16,
                       channel: 900,
                       adress: "南京浦口.明发悦庭"
                   }, {
                       id: 17,
                       channel: 950,
                       adress: "南京浦口.明发云庭"
                   }, {
                       id: 18,
                       channel: 350,
                       adress: "宿迁泗阳.明发首府"
                   }, {
                       id: 19,
                       channel: 450,
                       adress: "滁州全椒.桃源府邸"
                   },
               ],
               actSpreadList:[],
               actUserList:[],
               selectChannel: '',
               actCountData:null
           }

       },
       watch:{
         selected(n, o){
             this.actUser(n)
         }

       },
       methods:{
           actUser(id){
               let _self = this;
               _self.actUserList =[];
               _self.offset = 0;
               if(id==='1'){
                  return  _self.ActCountData()
               }
               if(id==='2'){
                   return  _self.SelectChannel1()
               }
               if(id==='3'){
                   return _self.SelectChannel2()
               }
           },
          //总体数据
           ActCountData(){
               let _self = this;
               request
                   .get(_self.global.API_URL, {
                       action: "/activity/relay/RelayAction/getMFActCountData",
                       requestParam: {
                           dl: 0
                       }
                   })
                   .then(response => {
                       console.log(response.obj)
                       _self.actCountData = response.obj
                   })
           },
           ActUserList(){

           },
           //导出
           exportData1(){
               let _self = this
               request
                   .get(_self.global.API_URL, {
                       action: "/activity/relay/RelayAction/getMFActCountData",
                       requestParam: {
                           dl: 1
                       }
                   })
                   .then(response => {
                       window.open(response.obj)
                   })
           },

           exportData2(){
               let _self = this
               request
                   .get(_self.global.API_URL, {
                       action: "/activity/relay/RelayAction/getMFActUserList",
                       requestParam: {
                           dl:1,
                           channel: _self.selectChannel,
                           size: 25,
                           offset: _self.offset
                       }
                   })
                   .then(response => {
                       window.open(response.obj)
                   })
           },

           exportData3(){
               let _self = this;
               let obj = {
                   dl:1,
                   size: 25,
                   offset: _self.offset,
                   actcode: _self.actcode
               }
               if( _self.selectChannel!=''){
                   obj.channel =  _self.selectChannel
               }
               request
                   .get(_self.global.API_URL, {
                       action: "/activity/relay/RelayAction/getActSpreadCountData",
                       requestParam: obj
                   })
                   .then(response => {
                       window.open(response.obj)
                   })
           },
           //下拉选中
           SelectChannel1() {
               let _self = this;
               _self.actUserList = [],
               request
                   .get(_self.global.API_URL, {
                       action: "/activity/relay/RelayAction/getMFActUserList",
                       requestParam: {
                           dl:0,
                           channel: _self.selectChannel,
                           size: 25,
                           offset: _self.offset
                       }
                   })
                   .then(response => {
                       _self.actUserList = _self.actUserList.concat(response.obj.list);
                       if (response.obj.total <= _self.actUserList.length) {
                           _self.hasMore = false;
                       }

                   })
           },
           SelectChannel2() {
               let _self = this;
               _self.actSpreadList = []
               request
                   .get(_self.global.API_URL, {
                       action: "/activity/relay/RelayAction/getActSpreadCountData",
                       requestParam: {
                           dl:0,
                           channel: _self.selectChannel,
                           size: 25,
                           offset: 0,
                           actcode: _self.actcode
                       }
                   })
                   .then(response => {
                       _self.actSpreadList = _self.actSpreadList.concat(response.obj.list)
                       if (response.obj.total <= _self.actSpreadList.length) {
                           _self.hasMore = false;
                       }
                   })
           },
           serchMore(n) {
               let _self = this;
               if(n == 2){
                   _self.offset++;
                   request
                       .get(_self.global.API_URL, {
                           action: "/activity/relay/RelayAction/getMFActUserList",
                           requestParam: {
                               dl:0,
                               channel: _self.selectChannel,
                               size: 25,
                               offset: _self.offset
                           }
                       })
                       .then(response => {
                           _self.actUserList = _self.actUserList.concat(response.obj.list);
                           if (response.obj.total <= _self.actUserList.length) {
                               _self.hasMore = false;
                           }

                       })
               }else {
                   _self.offset++;
                   request
                       .get(_self.global.API_URL, {
                           action: "/activity/relay/RelayAction/getActSpreadCountData",
                           requestParam: {
                               dl:0,
                               channel: _self.selectChannel,
                               size: 20,
                               offset: 0,
                               actcode: _self.actcode
                           }
                       })
                       .then(response => {
                           _self.actSpreadList = _self.actSpreadList.concat(response.obj.list);
                           if (response.obj.total <= _self.actSpreadList.length) {
                               _self.hasMore = false;
                           }

                       })
               }

           }
       },
       filters: {
           modifyTime(value) {
               if (value == null) {
                   return "";
               } else {
                   let date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                   let Y = date.getFullYear() + "-";
                   let M =
                       (date.getMonth() + 1 < 10
                           ? "0" + (date.getMonth() + 1)
                           : date.getMonth() + 1) + "-";
                   let D = date.getDate() + " ";
                   let h = date.getHours() + ":";
                   let m = date.getMinutes() + ":";
                   let s = date.getSeconds();
                   return Y + M + D + h + m + s;
               }
           }
       },
       created(){

       },
       mounted(){
           if(this.selected==='1'){
               this.ActCountData(this.isDownLoad)
           }

       }

   };
</script>
<style lang="stylus">
    .wrapper {
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: #E2E2E2
        background-size: 100% 100%;
    }
    .dataName{
        width: 100%
        text-align center
        line-height .5rem
        height .5rem
        color #000
        font-size .30rem
    }
    .mint-tab-item-label {
        color: inherit;
        font-size: 24px;
        line-height: 1;
    }
    .tabTitle{
        width: 100%
        background-color #cacaca
    }
    .tabTitle>ul{
        display flex
        height 30px
        font-size 14px
        line-height 30px
        text-align center
    }
    .tabTitle>ul>li{
        flex 1
    }
    .actCountData{
        width: 100%
    }
    .actCountData>ul{
        width: 100%
    }
    .actCountData>ul>li{
        width: 100%
        display flex
        height 30px
        font-size 14px
        line-height 30px
        text-align center
        background-color #e3e3e3
        border-bottom 1px solid #fff
    }
    .actCountData>ul>li>span{
        flex 1
    }
    .export{
        font-size 18px
        display inline-block
        margin-left 30px
        width: 60px
        border-radius 5px
        height 30px
        line-height 30px
        background-color #007aff
        color #fff
        text-align center
    }
    .actUserselect{
        width: 100%
        height 40px
        line-height 40px
        margin-left 50px
        font-size 16px
    }
    .actUserselect>select{
        width: 300px
        height 35px
    }
    .actUserselect>select>option{
        width: 100%
        height 40px
        line-height 40px
        text-align center
    }
    .actUserLists{
        width: 100%
    }
    .actUserLists>ul{
        width: 100%
    }
    .actUserLists>ul>li{
        width: 100%
        display flex
        height 30px
        font-size 14px
        line-height 30px
        text-align center
        background-color #e3e3e3
        border-bottom 1px solid #fff
    }
    .actUserLists>ul>li>span{
        flex 1
        overflow hidden
    }
    .seach{
        width: 100%
        text-align center
        line-height 40px
        height 40px
        background-color #cacaca
        color #fff
        font-size 18px
    }
</style>